<template>
    <rx-dialog  @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                    <div v-for="item in menus">
                        <div class="rx-board" @click="getSelect(item.id)">
                            <rx-icon-show :icon="selectId.contains(item.id)?'iconicon-test49':'iconicon-test47'"></rx-icon-show>
                            <div class="rx-app-icon" :style="{'backgroundColor':item.backColor}">
                                <rx-icon-show :icon="JSON.parse(item.iconPc).icon"></rx-icon-show>
                            </div>
                            <span class="rx-board-name">{{$i18(item.name)}}</span>
                        </div>
                        <template v-if="selectId.contains(item.id)">
                            <div class="rx-children" @click="getSelect(child.id)" v-for="child in item.children">
                                <div><rx-icon-show :icon="selectId.contains(child.id)?'iconicon-test49':'iconicon-test47'"></rx-icon-show><span class="rx-board-name">{{$i18(child.name)}}</span></div>
                                <template v-if="selectId.contains(child.id)">
                                    <div class="rx-params"  v-for="obj in getParams(child.params)"  @click.stop="onChange(item,child,obj)">
                                        <a-checkbox :checked="value.contains(obj.alias+item.appId)"></a-checkbox><span class="rx-board-name">{{$i18(obj.name)}}</span>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxLayout,RxDialog,Util} from '@lowcode/jpaas-base-lib';
import InsPortalDefApi from "@/common/api/portal/insPortalDef";
export default {
    name: "FormChartBoard",
    props:["destroy","chartAlias"],
    components: {
        RxLayout,
        RxDialog
    },
    data(){
        return{
          menus:[],
        value:[],
        chartValue:[],
        selectId:[],
        }
    },
    created(){
        this.value = JSON.parse(JSON.stringify(this.chartAlias))
        this.init();
    },
    methods:{
        init() {
            var self = this;
            InsPortalDefApi.getCustomMenus().then(res=>{
              self.menus = Util.listToTree(res.data,"id","parentId");
            })
        },
        getSelect(id){
            if(!this.selectId.contains(id)){
                this.selectId.push(id)
            }else {
                this.selectId.filter((res,index)=>{
                    if(res ==id){
                        this.selectId.splice(index,1)
                    }
                })
            }
        },
        onChange(item,child,obj){
            if(!this.value.contains(obj.alias+item.appId)){
                /*
                appId:应用appid
                menuKey：菜单别名key
                pageAlias：页面别名
                alias：组件别名
             */
                this.value.push(obj.alias+item.appId);
                this.chartValue.push({
                    appId: item.appId,
                    pageAlias:child.menuKey,
                    alias:obj.alias,
                    moduleId:obj.moduleId,
                    name:obj.name
                })
            }else {
                this.value.filter((res,index)=>{
                    if(res ==obj.alias+item.appId){
                        this.value.splice(index,1)
                    }
                })
                this.chartValue.filter((res,index)=>{
                    if(res.alias ==obj.alias){
                        this.chartValue.splice(index,1)
                    }
                })
            }
        },
        getParams(params){
            let list = [];
            if(!params){
                return [];
            }
            let obj =  JSON.parse(params);
            if(obj.config){
                let configList = JSON.parse(obj.config);
                if(configList.length>0){
                    configList.filter(res=>{
                        list.push({
                            alias:res.config.alias,
                            name: this.getName(res),
                            moduleId:res.id
                        })
                    })
                }
            }
            return list
        },
        getName(res){
            let name = {
                tabContainer:'tab容器',
                ureport:'ureport',
                quillEditor:'富文本框'
            }
            if(res.config.name){
                return res.config.name
            }
            if(name[res.defConf]){
                return  name[res.defConf]
            }
            return ''

        },
        handleSubmit(){
            Util.closeWindow(this,'ok',this.chartValue);
        },
        cancel(){
            Util.closeWindow(this,'cancel');
        },
    }
}
</script>

<style scoped>
.rx-board {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    margin: 10px 0px;
}

.rx-board-name {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 0px;
    color: rgba(0, 0, 0, 0.85);
    margin-left: 9px;
    padding-right: 20px;
}
.rx-app-icon{
    width: 30px;
    height: 30px;
    font-size: 20px;
    overflow: hidden;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-left: 10px;
}
.rx-children{
    display: flex;
    justify-content: flex-start;
    cursor: pointer;
    margin: 5px 0px 5px 20px;
    flex-direction: column;
}
.rx-params{
    align-items: center;
    cursor: pointer;
    margin: 5px 0px 5px 20px;
}
</style>
